<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/admin.css">
    <link rel="stylesheet" href="../assets/css/app.css">
</head>

<body data-type="generalComponents">


    <header class="am-topbar am-topbar-inverse admin-header">
        <div class="am-topbar-brand">
            <a href="javascript:;" class="tpl-logo">
                <img src="../assets/img/logo.png" alt="">
            </a>
        </div>
        <div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">

        </div>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

        <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

            <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="am-icon-bell-o"></span> 提醒 <span class="am-badge tpl-badge-success am-round">5</span></span>
                    </a>
                    <ul class="am-dropdown-content tpl-dropdown-content">
                        <li class="tpl-dropdown-content-external">
                            <h3>你有 <span class="tpl-color-success">5</span> 条提醒</h3><a href="###">全部</a></li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-plus tpl-dropdown-ico-btn-size tpl-badge-success"></span> 【预览模块】移动端 查看时 手机、电脑框隐藏。</a>
                            <span class="tpl-dropdown-list-fr">3小时前</span>
                        </li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-check tpl-dropdown-ico-btn-size tpl-badge-danger"></span> 移动端，导航条下边距处理</a>
                            <span class="tpl-dropdown-list-fr">15分钟前</span>
                        </li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-bell-o tpl-dropdown-ico-btn-size tpl-badge-warning"></span> 追加统计代码</a>
                            <span class="tpl-dropdown-list-fr">2天前</span>
                        </li>
                    </ul>
                </li>
                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="am-icon-comment-o"></span> 消息 <span class="am-badge tpl-badge-danger am-round">9</span></span>
                    </a>
                    <ul class="am-dropdown-content tpl-dropdown-content">
                        <li class="tpl-dropdown-content-external">
                            <h3>你有 <span class="tpl-color-danger">9</span> 条新消息</h3><a href="###">全部</a></li>
                        <li>
                            <a href="#" class="tpl-dropdown-content-message">
                                <span class="tpl-dropdown-content-photo">
                      <img src="../assets/img/user02.png" alt=""> </span>
                                <span class="tpl-dropdown-content-subject">
                      <span class="tpl-dropdown-content-from"> 禁言小张 </span>
                                <span class="tpl-dropdown-content-time">10分钟前 </span>
                                </span>
                                <span class="tpl-dropdown-content-font"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze UI 的成长，则离不开用户的支持。 </span>
                            </a>
                            <a href="#" class="tpl-dropdown-content-message">
                                <span class="tpl-dropdown-content-photo">
                      <img src="../assets/img/user03.png" alt=""> </span>
                                <span class="tpl-dropdown-content-subject">
                      <span class="tpl-dropdown-content-from"> Steam </span>
                                <span class="tpl-dropdown-content-time">18分钟前</span>
                                </span>
                                <span class="tpl-dropdown-content-font"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。 </span>
                            </a>
                        </li>

                    </ul>
                </li>
                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="am-icon-calendar"></span> 进度 <span class="am-badge tpl-badge-primary am-round">4</span></span>
                    </a>
                    <ul class="am-dropdown-content tpl-dropdown-content">
                        <li class="tpl-dropdown-content-external">
                            <h3>你有 <span class="tpl-color-primary">4</span> 个任务进度</h3><a href="###">全部</a></li>
                        <li>
                            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                        <span class="desc">Amaze UI 用户中心 v1.2 </span>
                                <span class="percent">45%</span>
                                </span>
                                <span class="progress">
                        <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-success" style="width:45%"></div></div>
                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                        <span class="desc">新闻内容页 </span>
                                <span class="percent">30%</span>
                                </span>
                                <span class="progress">
                       <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-secondary" style="width:30%"></div></div>
                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                        <span class="desc">管理中心 </span>
                                <span class="percent">60%</span>
                                </span>
                                <span class="progress">
                        <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-warning" style="width:60%"></div></div>
                    </span>
                            </a>
                        </li>

                    </ul>
                </li>
                <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen" class="tpl-header-list-link"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>

                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img src="../assets/img/user01.png"></span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li><a href="#"><span class="am-icon-bell-o"></span> 资料</a></li>
                        <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                        <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                    </ul>
                </li>
                <li><a href="###" class="tpl-header-list-link"><span class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
            </ul>
        </div>
    </header>







    <div class="tpl-page-container tpl-page-header-fixed">


        <div class="tpl-left-nav tpl-left-nav-hover">
            <div class="tpl-left-nav-title">
                Amaze UI 列表
            </div>
            <div class="tpl-left-nav-list">
                <ul class="tpl-left-nav-menu">
                    <li class="tpl-left-nav-item">
                        <a href="index.html" class="nav-link active">
                            <i class="am-icon-home"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="tpl-left-nav-item">
                        <a href="chart.html" class="nav-link tpl-left-nav-link-list">
                            <i class="am-icon-bar-chart"></i>
                            <span>数据表</span>
                            <i class="tpl-left-nav-content tpl-badge-danger">
               12
             </i>
                        </a>
                    </li>

                    <li class="tpl-left-nav-item">
                        <!-- 打开状态 a 标签添加 active 即可   -->
                        <a href="javascript:;" class="nav-link tpl-left-nav-link-list active">
                            <i class="am-icon-table"></i>
                            <span>表格</span>
                            <!-- 列表打开状态的i标签添加 tpl-left-nav-more-ico-rotate 图表即90°旋转  -->
                            <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
                        </a>
                        <ul class="tpl-left-nav-sub-menu" style="display:block">
                            <li>
                                <!-- 打开状态 a 标签添加 active 即可   -->
                                <a href="table-font-list.html" class="active">
                                    <i class="am-icon-angle-right"></i>
                                    <span>文字表格</span>
                                    <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
                                </a>

                                <a href="table-images-list.html">
                                    <i class="am-icon-angle-right"></i>
                                    <span>图片表格</span>
                                    <i class="tpl-left-nav-content tpl-badge-success">
               18
             </i>

                                    <a href="form-news.html">
                                        <i class="am-icon-angle-right"></i>
                                        <span>消息列表</span>
                                        <i class="tpl-left-nav-content tpl-badge-primary">
               5
             </i>


                                        <a href="form-news-list.html">
                                            <i class="am-icon-angle-right"></i>
                                            <span>文字列表</span>

                                        </a>
                            </li>
                        </ul>
                    </li>

                    <li class="tpl-left-nav-item">
                        <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
                            <i class="am-icon-wpforms"></i>
                            <span>表单</span>
                            <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                        </a>
                        <ul class="tpl-left-nav-sub-menu">
                            <li>
                                <a href="form-amazeui.html">
                                    <i class="am-icon-angle-right"></i>
                                    <span>Amaze UI 表单</span>
                                    <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
                                </a>

                                <a href="form-line.html">
                                    <i class="am-icon-angle-right"></i>
                                    <span>线条表单</span>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="tpl-left-nav-item">
                        <a href="login.html" class="nav-link tpl-left-nav-link-list">
                            <i class="am-icon-key"></i>
                            <span>登录</span>

                        </a>
                    </li>
                </ul>
            </div>
        </div>





        <div class="tpl-content-wrapper">
            <ol class="am-breadcrumb">
                <li><a href="#" class="am-icon-home">首页</a></li>
                <li><a href="#">Amaze UI CSS</a></li>
                <li class="am-active">文字列表</li>
            </ol>
            <div class="tpl-portlet-components">
<!--                 <div class="portlet-title">
                    <div class="caption font-green bold">
                        <span class="am-icon-code"></span> 列表
                    </div>
                    <div class="tpl-portlet-input tpl-fz-ml">
                        <div class="portlet-input input-small input-inline">
                            <div class="input-icon right">
                                <i class="am-icon-search"></i>
                                <input type="text" class="form-control form-control-solid" placeholder="搜索..."> </div>
                        </div>
                    </div>
                </div> -->
                <div class="tpl-block">
                    <div class="am-g">
<!--                         <div class="am-u-sm-12 am-u-md-6">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
                                </div>
                            </div>
                        </div> -->
                        <div class="am-u-sm-12 am-u-md-3">
                            <div id="equTypeDiv" class="am-form-group">
                                <select id="equTypeSelect" data-am-selected="{btnSize: 'sm'}">
					             <!--  <option value="allEquType">所有(设备类型)</option> -->
					             <!--  <option value="传感器">传感器</option> -->
					              <!-- <option value="环控设备">环控设备</option>
					              <option value="饲喂设备">饲喂设备</option>
					              <option value="监控设备">监控设备</option> -->
					            </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-3">
                            <div class="am-form-group">
                                <select hidden="" id="equNameSelect" data-am-selected="{btnSize: 'sm'}">
					             <option value="allEquName">所有(设备名称)</option>
					             <!--  <option value="option2">IT业界</option>
					              <option value="option3">数码产品</option>
					              <option value="option3">笔记本电脑</option>
					              <option value="option3">平板电脑</option>
					              <option value="option3">只能手机</option>
					              <option value="option3">超极本</option> -->
					            </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-3">
                            <div class="am-form-group">
                                <select id="pigstyIdSelect" data-am-selected="{btnSize: 'sm'}">
					              <option value="0">所有(猪舍编号)</option>
					              <!-- <option value="option2">IT业界</option>
					              <option value="option3">数码产品</option>
					              <option value="option3">笔记本电脑</option>
					              <option value="option3">平板电脑</option>
					              <option value="option3">只能手机</option>
					              <option value="option3">超极本</option> -->
					            </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-2">
                            <div class="am-form-group">
                                <select id="hogcoteIdSelect" data-am-selected="{btnSize: 'sm'}">
					              <option value="0">所有(猪栏编号)</option>
					              <!-- <option value="option2">IT业界</option>
					              <option value="option3">数码产品</option>
					              <option value="option3">笔记本电脑</option>
					              <option value="option3">平板电脑</option>
					              <option value="option3">只能手机</option>
					              <option value="option3">超极本</option> -->
					            </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-1">
                            <div class="am-form-group">
								<button
								  onclick="dataView()"
								  type="button"
								  class="am-btn am-btn-danger"
								  >
								  可视化
								</button>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="am-popup" id="my-popup">
					  <div class="am-popup-inner">
					    <div class="am-popup-hd">
					      <h4 class="am-popup-title">可视化</h4>
					      <span data-am-modal-close
					            class="am-close">&times;</span>
					    </div>
					    <div id="dataViewDiv" class="am-popup-bd">
					      
					    </div>
					  </div>
					</div> -->
					<div class="am-popup" id="my-popup">
					  <div class="am-popup-inner">
					    <div class="am-popup-hd">
					      <h4 class="am-popup-title">可视化</h4>
					      <span data-am-modal-close
					          class="am-close">&times;</span>
					    </div>
					    <div class="">
					     	<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
							  <p>开始日期应小于结束日期！</p>
							</div>
							<div class="am-g">
							  <div class="am-u-sm-5">
							    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始日期</button><span id="my-startDate"></span>
							  </div>
							  <div class="am-u-sm-5">
							    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束日期</button><span id="my-endDate"></span>
							  </div>
							  <div class="am-u-sm-2">
							    <button type="button" class="am-btn am-btn-primary btn-loading-example">可视化</button>
							  </div>
							</div>
					    </div>
					    <div style="width:600px;height:20px;">
					    </div>
					    <div style="width: 600px;height:550px;" id="dataViewDiv" class="">
					      
					    </div>
					  </div>
					</div> 
                    <div class="am-g">
                        <div class="am-u-sm-12">
                            <form class="am-form">
                                <table class="am-table am-table-striped am-table-hover table-main">
                                    <thead>
                                        <tr id="tableHead">
                                            <th class="table-check"><input type="checkbox" value="allId" class="tpl-table-fz-check"></th>
                                            <th class="table-title">设备ID</th>
                                            <th class="table-title">猪舍ID</th>
                                            <th class="table-title">猪栏ID</th>
                                            <th class="table-title">猪只ID</th>
                                            <th class="table-title">设备类型</th>
                                            <th class="table-title">设备名称</th>
                                            <th class="table-title">设备状态</th>
                                            <th class="table-title">时间间隔</th>
                                            <th class="table-title">自动异常处理</th>
                                            <!-- <th class="table-title">采集数据</th>
                                            <th class="table-date am-hide-sm-only">采集时间</th>  -->
                                                                                     <!--  <th class="table-id">ID</th>
                                            <th class="table-title">设备ID</th>
                                            <th class="table-type">类别</th>
                                            <th class="table-author am-hide-sm-only">作者</th>
                                            <th class="table-date am-hide-sm-only">修改日期</th>
                                            <th class="table-set">操作</th> -->
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <!-- <tr id="tableBodyRow">
                                            <td><input type="checkbox"></td>
                                            <td>1</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr> -->
                                    </tbody>
                                        <!-- <tr>
                                            <td><input type="checkbox"></td>
                                            <td>2</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>3</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>4</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>5</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>6</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>7</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>8</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>9</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>10</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>11</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>12</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>13</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>14</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试14号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox"></td>
                                            <td>15</td>
                                            <td><a href="#">Business management</a></td>
                                            <td>default</td>
                                            <td class="am-hide-sm-only">测试1号</td>
                                            <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody> -->
                                </table>
                                <div class="am-cf">

                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination">
                                            <li class="am-disabled"><a href="#">«</a></li>
                                            <li class="am-active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">»</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <hr>

                            </form>
                        </div>

                    </div>
                </div>
                <div class="tpl-alert"></div>
            </div>

        </div>

    </div>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/app.js"></script>
<script src="../assets/js/echarts.min.js"></script>
<script type="text/javascript">
var sensorIds;
var sensorNames;
var startTime;
var endTime;
$(document).ready(function(){
	
 	$("#equTypeSelect").empty();
 	/* $("#equNameSelect option:not(:first)").remove(); */
	
 	var jsonConditionObj = {
			"equType":"",
			"equName":"",
			"pigstyId":"",
			"hogcoteId":""
	}
	equMsgShow(JSON.stringify(jsonConditionObj),"equTypeSelect"); 
});
var pathName=window.location.pathname;
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
function equMsgShow(condition, select) {
	$.ajax({
		url:projectName+"/equ/equMsgShow.do",
		type:"post",
		contentType:'application/json;charset=utf-8',
        data: condition,
		success: function(result){
        	var conditionList = result.extend.conditionList;
        	/* var tableHeadList = result.extend.tableHeadList; */
        	var tableBodyList = result.extend.tableBodyList;
			switch(select){
			case "equTypeSelect":
	        	/* $("#equTypeSelect").off('change'); */
	        	$.each(conditionList.equTypeList,function(index,equType){
	        		var option = $("#equTypeSelect").append("<option value='"+equType+"'>"+equType+"</option>");
				});
	        	$.each(conditionList.equNameList,function(index,equName){
	        		var option = $("#equNameSelect").append("<option value='"+equName+"'>"+equName+"</option>");
				});
	        	/* $("#equTypeSelect").on('change'); */
/* 	        	$.each(conditionList.equNameList,function(index,name){
	        		var option = $("#equNameSelect").append("<option value='"+name+"'>"+name+"</option>");
				}); */
				break;
			case "equNameSelect":/* <tr id="tableHead"> <th class="table-title">设备ID</th> */
				/* var conditionList = result.extend.conditionList;
	        	var tableHeadList = result.extend.tableHeadList;
	        	var tableBodyList = result.extend.tableBodyList; */
/* 	        	$.each(conditionList.equTypeList,function(index,type){
	        		var option = $("#equTypeSelect").append("<option value='"+type+"'>"+type+"</option>");
				}); */
				/* $("#equNameSelect").off('change'); */
	        	$.each(conditionList.equNameList,function(index,equName){
	        		var option = $("#equNameSelect").append("<option value='"+equName+"'>"+equName+"</option>");
				});
	        /* 	$("#equNameSelect").on('change'); */
	        	/* $.each(tableHeadList,function(index,headEle){
	        		$("#tableHead").append("<th class='table-title'>"+headEle+"</option>");
				});
	        	$.each(tableBodyList,function(index,bodyRow){
	        		var tableBodyRow = $("<tr></tr>");
	        		$("#tableBody").append(tableBodyRow);
		        	$.each(bodyRow,function(index,bodyRowEle){
		        		var td = $("<td></td>").append(bodyRowEle);
		        		tableBodyRow.append(td);
					});
				});
				break; */
			case "pigstyIdSelect":
				/* $("#pigstyIdSelect").off('change'); */
				$.each(conditionList.pigstyIdList,function(index,pigstyId){
	        		var option = $("#pigstyIdSelect").append("<option value='"+pigstyId+"'>"+pigstyId+"</option>");
				});
				/* $("#pigstyIdSelect").on('change'); */
				break;
			case "hogcoteIdSelect":
				/* $("#hogcoteIdSelect").off('change'); */
				$.each(conditionList.hogcoteIdList,function(index,hogcoteId){
	        		var option = $("#hogcoteIdSelect").append("<option value='"+hogcoteId+"'>"+hogcoteId+"</option>");
				});
				/* $("#hogcoteIdSelect").on('change'); */
				break;
			default:break;
			}
			$("#tableBody").empty();
/* 			alert($("#tableBody tr").length)
			alert($("#equTypeSelect").val()); */
			switch($("#equTypeSelect").val()){
				case "传感器":
		        	$.each(tableBodyList.sensorVoList,function(index,sensorVo){
		        		var tableBodyRow = $("<tr></tr>");
		        		$("#tableBody").append(tableBodyRow);
		        		tableBodyRow.append("<td><input name='"+sensorVo.equName+"' value='"+sensorVo.equId+"' type='checkbox'></td>")
		        		.append("<td>"+sensorVo.equId+"</td>")
		        		.append("<td>"+sensorVo.pigstyId+"</td>")
		        		.append("<td>"+sensorVo.hogcoteId+"</td>")
		        		.append("<td>"+sensorVo.pigId+"</td>")
		        		.append("<td>"+sensorVo.equType+"</td>")
		        		.append("<td>"+sensorVo.equName+"</td>")
		        		.append("<td>"+sensorVo.workState+"</td>")
		        		.append("<td>"+sensorVo.timeInterval+"</td>")
		        		.append("<td>"+sensorVo.isAutoHandle+"</td>")
					});
					break;
				case "环控设备":
					$.each(tableBodyList.controlEquVoList,function(index,controlEqu){
						var tableBodyRow = $("<tr></tr>");
		        		$("#tableBody").append(tableBodyRow);
		        		tableBodyRow.append("<td>"+controlEqu.equId+"</td>")
		        		.append("<td>"+controlEqu.pigstyId+"</td>")
		        		.append("<td>"+controlEqu.hogcoteId+"</td>")
		        		.append("<td>"+controlEqu.equType+"</td>")
		        		.append("<td>"+controlEqu.equName+"</td>")
		        		.append("<td>"+controlEqu.workState+"</td>")
		        		.append("<td>"+controlEqu.rangMin+"</td>")
		        		.append("<td>"+controlEqu.rangMax+"</td>")
		        		.append("<td>"+controlEqu.isAutoHandle+"</td>")
					});
					break;
				case "饲喂设备":
					$.each(tableBodyList.feedEquVoList,function(index,controlEqu){
						var tableBodyRow = $("<tr></tr>");
		        		$("#tableBody").append(tableBodyRow);
		        		tableBodyRow.append("<td>"+controlEqu.equId+"</td>")
		        		.append("<td>"+controlEqu.pigstyId+"</td>")
		        		.append("<td>"+controlEqu.hogcoteId+"</td>")
		        		.append("<td>"+controlEqu.equType+"</td>")
		        		.append("<td>"+controlEqu.equName+"</td>")
		        		.append("<td>"+controlEqu.workState+"</td>")
		        		.append("<td>"+controlEqu.isAutoHandle+"</td>")
					});
					break;
				case "监控设备":
					$.each(tableBodyList.monitorEquVoList,function(index,monitorEqu){
						var tableBodyRow = $("<tr></tr>");
		        		$("#tableBody").append(tableBodyRow);
		        		tableBodyRow.append("<td>"+monitorEqu.equId+"</td>")
		        		.append("<td>"+monitorEqu.pigstyId+"</td>")
		        		.append("<td>"+monitorEqu.hogcoteId+"</td>")
		        		.append("<td>"+monitorEqu.equType+"</td>")
		        		.append("<td>"+monitorEqu.equName+"</td>")
		        		.append("<td>"+monitorEqu.workState+"</td>")
		        		.append("<td>"+monitorEqu.isAutoHandle+"</td>")
					});
					break;
				default:
					break;
			} 
		}
	});
}
/* function changeEquName(){
	var equNames=[
		["温度传感器","湿度传感器","CO2传感器","NH3传感器","氨气传感器","硫化氢传感器"],
		["风机","湿帘","加热器"],
		["饲喂系统"],
		["猪舍监控器","猪栏监控器"]
	];
		var equTypeObj = $("#equType");   //获得国家下拉框的对象
		var equNameObj= $("#equName");     //获得城市下拉框的对象
		var equName = equNames[equTypeObj.selectedIndex-1];    //得到对应国家的城市数组
		equNameObj.length = 1;    //清空城市下拉框，仅留提示选项。
		//通过for循环，将城市中的值填充到城市下拉框中
		for(var i=0;i<equName.length;i++){
			equName[i+1]=new Option(country[i],country[i]);
		}
	}
}


 */
$("#equTypeSelect").change(function(){
	if($(this).children('option:selected').val() == "" || $.trim($(this).children('option:selected').val()).length == 0){
	    return false;
	}
	$("#tableHead").empty();
    switch($(this).children('option:selected').val()){
    	case "传感器":
    		$("#tableHead").append("<th class='table-check'><input type='checkbox' class='tpl-table-fz-check'></th>")
    		.append("<th class='table-title'>设备ID</th>")
		    .append("<th class='table-title'>猪舍ID</th>")
		    .append("<th class='table-title'>猪栏ID</th>")
		    .append("<th class='table-title'>猪只ID</th>")
		    .append("<th class='table-title'>设备类型</th>")
		    .append("<th class='table-title'>设备名称</th>")
		    .append("<th class='table-title'>设备状态</th>")
		    .append("<th class='table-title'>时间间隔</th>")
		    .append("<th class='table-title'>自动异常处理</th>");
    		break;
    	case "环控设备":
    		$("#tableHead").append("<th class='table-title'>设备ID</th>")
		    .append("<th class='table-title'>猪舍ID</th>")
		    .append("<th class='table-title'>猪栏ID</th>")
		    .append("<th class='table-title'>设备类型</th>")
		    .append("<th class='table-title'>设备名称</th>")
		    .append("<th class='table-title'>设备状态</th>")
		    .append("<th class='table-title'>阈值最小值</th>")
		    .append("<th class='table-title'>阈值最大值</th>")
		    .append("<th class='table-title'>自动异常处理</th>");
    		break;
    	case "饲喂设备":
    		$("#tableHead").append("<th class='table-title'>设备ID</th>")
		    .append("<th class='table-title'>猪舍ID</th>")
		    .append("<th class='table-title'>猪栏ID</th>")
		    .append("<th class='table-title'>设备类型</th>")
		    .append("<th class='table-title'>设备名称</th>")
		    .append("<th class='table-title'>设备状态</th>")
		    .append("<th class='table-title'>自动异常处理</th>");
    		break;
    	case "监控设备":
    		$("#tableHead").append("<th class='table-title'>设备ID</th>")
		    .append("<th class='table-title'>猪舍ID</th>")
		    .append("<th class='table-title'>猪栏ID</th>")
		    .append("<th class='table-title'>设备类型</th>")
		    .append("<th class='table-title'>设备名称</th>")
		    .append("<th class='table-title'>设备状态</th>")
		    .append("<th class='table-title'>自动异常处理</th>");
    		break;
    	default:break;
    }
    // 先清空第二个
/*     $("#equNameSelect").length = 1;
    $("#pigstyIdSelect").length = 1;
    $("#hogcoteIdSelect").length = 1; */
    $("#equNameSelect option:not(:first)").remove();
    $("#pigstyIdSelect option:not(:first)").remove();
    $("#hogcoteIdSelect option:not(:first)").remove();
/*     $("#equNameSelect").off('change');
    $("#pigstyIdSelect").off('change');
    $("#hogcoteIdSelect").off('change'); */
/*     flag = 1;
    var option = $("#equNameSelect").append("<option value='allEquName'>所有(设备名称)</option>");
    var option = $("#pigstyIdSelect").append("<option value='allPigstyId'>所有(猪舍编号)</option>");
    var option = $("#hogcoteIdSelect").append("<option value='allHogcoteId'>所有(猪栏编号)</option>");
    flag = 0; */
   /*  $("#equNameSelect").on('change');
    $("#pigstyIdSelect").on('change');
    $("#hogcoteIdSelect").on('change'); */
	var jsonConditionObj = {
			equType: $(this).children('option:selected').val(),
			equName:"",
			pigstyId:"",
			hogcoteId:""
	}
	equMsgShow(JSON.stringify(jsonConditionObj),"equNameSelect");
});

$("#equNameSelect").change(function(){
	if($(this).children('option:selected').val() == "" || $.trim($(this).children('option:selected').val()).length == 0){
	    return false;
	}
    // 先清空第二个
/*     $("#pigstyIdSelect").length = 1;
    $("#hogcoteIdSelect").length = 1; */
    $("#pigstyIdSelect option:not(:first)").remove();
    $("#hogcoteIdSelect option:not(:first)").remove();
/*     $("#pigstyIdSelect").off('change');
    $("#hogcoteIdSelec").off('change'); */
/*     flag = 1;
    var option = $("#pigstyIdSelect").append("<option value='allPigstyId'>所有(猪舍编号)</option>");
    var option = $("#hogcoteIdSelect").append("<option value='allHogcoteId'>所有(猪栏编号)</option>");
    flag = 0; */
/*     $("#pigstyIdSelect").on('change');
    $("#hogcoteIdSelec").on('change'); */
    var equName = $(this).children('option:selected').val();
	if(equName == "allEquName"){
		equName = "";
	} 
    var jsonConditionObj = {
			"equType": $("#equTypeSelect").val(),
			"equName":equName,
			"pigstyId":"",
			"hogcoteId":""
	}
	equMsgShow(JSON.stringify(jsonConditionObj),"pigstyIdSelect");
});

$("#pigstyIdSelect").change(function(){
	if($(this).children('option:selected').val() == "" || $.trim($(this).children('option:selected').val()).length == 0){
	    return false;
	}
    // 先清空第二个
/*     $("#hogcoteIdSelect").length = 1; */
/*     $("#hogcoteIdSelect").off('change'); */
		$("#hogcoteIdSelect option:not(:first)").remove();
/* 	flag = 1;
	var option = $("#hogcoteIdSelect").append("<option value='allHogcoteId'>所有(猪栏编号)</option>");
	flag = 0; */
/*     $("#hogcoteIdSelect").on('change'); */
    var pigstyId = $(this).children('option:selected').val();
	if(pigstyId == "allPigstyId"){
		pigstyId = "";
	}
	var jsonConditionObj = {
			"equType": $("#equTypeSelect").val(),
			"equName":$("#equNameSelect").val(),
			"pigstyId":pigstyId,
			"hogcoteId":""
	}
	equMsgShow(JSON.stringify(jsonConditionObj),"hogcoteIdSelect");
});
$("#hogcoteIdSelect").change(function(){
	if($(this).children('option:selected').val() == "" || $.trim($(this).children('option:selected').val()).length == 0){
	    return false;
	}
    // 先清空第二个
    var hogcoteId = $(this).children('option:selected').val();
	if(hogcoteId == "allPigstyId"){
		hogcoteId = "";
	}
	var jsonConditionObj = {
		"equType": $("#equTypeSelect").val(),
		"equName":$("#equNameSelect").val(),
		"pigstyId":$("#pigstyIdSelect").val(),
		"hogcoteId":hogcoteId
	}
	equMsgShow(JSON.stringify(jsonConditionObj),"");
});

		/* var pathName=window.location.pathname;
		var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 

		 $.ajax({
	        	url:projectName+"/sow/selectAllSowFen.do",
				type:"post",
				success:function(result){
					build_sowfens_table(result);
				}
	        	
	        });
		 
		  function build_sowfens_table(result){
	        	$("#sowfenstable tbody").empty();
	        	var sowFens=result.extend.sowFens;
	        	$.each(sowFens,function(index,sowFen){
	        		var sowNoTd = $("<td></td>").append(sowFen.sowNo);
					var pigstyNoTd = $("<td></td>").append(sowFen.pigstyNo);
					var hogcoteNoTd = $("<td></td>").append(sowFen.hogcoteNo);
					var fenDateTd = $("<td></td>").append(sowFen.fenDate);
					var stateTd = $("<td></td>").append(sowFen.state);	
					var numberTd = $("<td></td>").append(sowFen.number);	
					var healthpigTd = $("<td></td>").append(sowFen.healthpig);
					var nhealthpigTd = $("<td></td>").append(sowFen.nhealthpig);
					var editBtn = $("<button></button>").addClass("am-btn am-btn-primary am-btn-xs edit_btn").append("编辑");
					editBtn.attr("edit-id",sowFen.sowNo);
					var delBtn =  $("<button></button>").addClass("am-btn am-btn-danger am-btn-xs delete_btn").append("删除");
					delBtn.attr("del-id",sowFen.sowNo);
					var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
					$("<tr></tr>").append(sowNoTd)
						.append(pigstyNoTd)
						.append(hogcoteNoTd)
						.append(fenDateTd)
						.append(stateTd)
						.append(numberTd)
						.append(healthpigTd)
						.append(nhealthpigTd)
						.append(btnTd)
						.appendTo("#sowfenstable tbody");
	                   });
	        	} */
	function dataView(){
	    sensorIds = new Array();
	    sensorNames = new Array();
        $.each($('input:checkbox:checked'),function(index){
        	sensorIds[index] = $(this).val();
        	sensorNames[index] = $(this).attr("name");
        });
        if(sensorIds.length == 0){
        	alert("请选择需要可视化的传感器!");
        	return;
        }
        if(sensorNames.length>=2){
        	for(var i = 1; i < sensorNames.length; i++){
        		if(sensorNames[0] != sensorNames[i]){
        			alert("请选择相同名称的传感器!");
        			return;
        		}
        	}
        }
        
        endTime = new Date();
        startTime = new Date();
        startTime.setDate(endTime.getDate()-7);

        $("#my-startDate").text(startTime.getFullYear()+"-"+(startTime.getMonth()+1)+"-"+startTime.getDate());
        $("#my-endDate").text(endTime.getFullYear()+"-"+(endTime.getMonth()+1)+"-"+endTime.getDate());
        sendData = {"sensorIds":sensorIds,"startTime":startTime,"endTime":endTime,"t":"test"};
        /* var sendData = {"t":"test"}; */
        $.ajax({
    		url:projectName+"/equ/getSensorData.do",
    		type:"post",
            data: sendData,
 				success: function(result){
 					
 					var sensorData = result.extend.sensorData;
 	 				var responseData = new Array();
 	    			$.each(sensorData, function (index, key, value) {
 	    				var i = index-1;
 	    				responseData[i] = new Array();
 	        			$.each(key, function (index, item) {
 	        				responseData[i][index] = item;
 	        			});
 	    			});
 					
 					var dataViewDiv = echarts.init(document.getElementById('dataViewDiv'));
 					var upColor = '#ec0000';
 					var upBorderColor = '#8A0000';
 					var downColor = '#00da3c';
 					var downBorderColor = '#008F28';
 					//var colors = ['#5793f3', '#d14a61', '#675bba'];
 					var legends = new Array();
 					$.each(sensorIds, function (index,item) {
 						legends[index] = item+"号"+sensorNames[0];
 	    			});
 					legends[legends.length] = sensorNames[0]+"均值";
 					alert(legends);
 					var data = generateOHLC(responseData[0]);

 					var option = {
 					    dataset: {
 					        source: data
 					    	//source: responseData
 					    },
 					    title: {
 					        text: 'Data Amount: ' + echarts.format.addCommas(1)
 					    },
 					   // color: colors,
 					    legend: {
 					    	top:'5%',
 					        data:legends
 					    },
 					    tooltip: {
 					        trigger: 'axis',
 					        axisPointer: {
 					            type: 'line'
 					        }
 					    },
 					    toolbox: {
 					        feature: {
 					            dataZoom: {
 					                yAxisIndex: false
 					            },
 					        }
 					    },
 					    grid: [
 					        {
 					            left: '10%',
 					            right: '10%',
 					            bottom: 200
 					        }
 					    ],
 					    xAxis: [
 					        {
 					            type: 'category',
 					            scale: true,
 					            boundaryGap : false,
 					            // inverse: true,
 					            axisLine: {onZero: false},
 					            splitLine: {show: false},
 					            splitNumber: 20,
 					            min: 'dataMin',
 					            max: 'dataMax'
 					        }/* ,
 					        {
 					            type: 'category',
 					            gridIndex: 1,
 					            scale: true,
 					            boundaryGap : false,
 					            axisLine: {onZero: false},
 					            axisTick: {show: false},
 					            splitLine: {show: false},
 					            axisLabel: {show: false},
 					            splitNumber: 20,
 					            min: 'dataMin',
 					            max: 'dataMax'
 					        } */
 					    ],
 					    yAxis: [
 					        {
 					            scale: true,
 					            splitArea: {
 					                show: true
 					            }
 					        }/* ,
 					        {
 					            scale: true,
 					            gridIndex: 1,
 					            splitNumber: 2,
 					            axisLabel: {show: false},
 					            axisLine: {show: false},
 					            axisTick: {show: false},
 					            splitLine: {show: false}
 					        } */
 					    ],
 					    dataZoom: [
 					        {
 					            type: 'inside',
// 					            xAxisIndex: [0, 1],
 					            xAxisIndex: [0],
 					            start: 10,
 					            end: 100
 					        }/* ,
 					        {
 					            show: true,
 					            xAxisIndex: [0, 1],
 					            type: 'slider',
 					            bottom: 10,
 					            start: 10,
 					            end: 100,
 					            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
 					            handleSize: '105%'
 					        } */
 					    ],
 					    visualMap: {
 					        show: false,
 					        seriesIndex: 1,
 					        dimension: 6,
 					        pieces: [{
 					            value: 1,
 					            color: upColor
 					        }, {
 					            value: -1,
 					            color: downColor
 					        }]
 					    },
 					    series: [
 					        {
 					        	name:legends[0],
 					            type: 'line',
 					            itemStyle: {
 					                color: upColor,
 					                color0: downColor,
 					                borderColor: upBorderColor,
 					                borderColor0: downBorderColor
 					            },
 					            encode: {
 					                x: 0,
 					                y: [1, 4, 3, 2]
 					            }
 					        }
 					    ]
 					};

 					function generateOHLC(responseData) {
 					    var data = [];
/* 
 					    var xValue = +new Date(2011, 0, 1);
 					    var minute = timeInterval * 1000;
 					    //var baseValue = Math.random() * 12000;
 					    var boxVals;
 					    var dayRange = 12; */

 					    for (var i = 0; i < responseData.length; i++) {
 					       /*  baseValue = Math.random() * 20 - 10; */

 					       /*for (var j = 0; j < 4; j++) {
 					            boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
 					        }*/
 					       /*  boxVals = 1000+(Math.random()*100); */
 					        data[i] = [
 					            echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', responseData[i].getTime),
 					           responseData[i].sensorData
 					            //getSign(data, i) 
 					            ];
 					/*        boxVals[1] =1500;
 					        boxVals[2] =2000;
 					        boxVals[3] =2500;
 					        boxVals.sort();

 					        var idxRandom = Math.random();
 					        var openIdx = Math.round(Math.random() * 3);
 					        var closeIdx = Math.round(Math.random() * 2);
 					        if (closeIdx === openIdx) {
 					            closeIdx++;
 					        }
 					        var volumn = boxVals[3] * (1000 + Math.random() * 500);

 					        // ['open', 'close', 'lowest', 'highest', 'volumn']
 					        // [1, 4, 3, 2]
 					        data[i] = [
 					            echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
 					            +boxVals[openIdx].toFixed(2), // open
 					            +boxVals[3].toFixed(2), // highest
 					            +boxVals[0].toFixed(2), // lowest
 					            +boxVals[closeIdx].toFixed(2),  // close
 					            volumn.toFixed(0),
 					            getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
 					        ];*/
 					        
 					    }

 					    return data;

 					    /*function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
 					        var sign;
 					        if (openVal > closeVal) {
 					            sign = -1;
 					        }
 					        else if (openVal < closeVal) {
 					            sign = 1;
 					        }
 					        else {
 					            sign = dataIndex > 0
 					                // If close === open, compare with close of last record
 					                ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
 					                // No record of previous, set to be positive
 					                : 1;
 					        }

 					        return sign;
 					    }*/
 					}

 					
    		        dataViewDiv.setOption(option);
    		        $('#my-popup').modal(); 
 					
 				/* var sensorData = result.extend.sensorData;
 				var responseDate = new Array();
    			var dataCount;
    			$.each(sensorData, function (index, item) {
    				var i = index;
    				responseDate[i] = new Array();
        			$.each(item, function (index, key, value) {
        				responseDate[i][index] = value;
        			});
    			});
    			var dataViewDiv = echarts.init(document.getElementById('dataViewDiv'));
    			 var upColor = '#ec0000';
    			 var upBorderColor = '#8A0000';
    			 var downColor = '#00da3c';
    			 var downBorderColor = '#008F28';
    			 var data = generateOHLC(responseDate,dataCount,5);
    			 var option = {
    			      dataset: {
    			         source: data
    			     } ,
    			     title: {
    			         text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
    			     },
    			     tooltip: {
    			         trigger: 'axis',
    			         axisPointer: {
    			             type: 'line'
    			         }
    			     },
    			     toolbox: {
    			         feature: {
    			             dataZoom: {
    			                 yAxisIndex: false
    			             },
    			         }
    			     },
    			     grid: [
    			         {
    			             left: '10%',
    			             right: '10%',
    			             bottom: 200
    			         },
    			         {
    			             left: '10%',
    			             right: '10%',
    			             height: 80,
    			             bottom: 80
    			         }
    			     ],
    			     xAxis: [
    			         {
    			             type: 'category',
    			             scale: true,
    			             boundaryGap : false,
    			             // inverse: true,
    			             axisLine: {onZero: false},
    			             splitLine: {show: false},
    			             splitNumber: 20,
    			             min: 'dataMin',
    			             max: 'dataMax'
    			         },
    			         {
    			             type: 'category',
    			             gridIndex: 1,
    			             scale: true,
    			             boundaryGap : false,
    			             axisLine: {onZero: false},
    			             axisTick: {show: false},
    			             splitLine: {show: false},
    			             axisLabel: {show: false},
    			             splitNumber: 20,
    			             min: 'dataMin',
    			             max: 'dataMax'
    			         }
    			     ],
    			     yAxis: [
    			         {
    			             scale: true,
    			             splitArea: {
    			                 show: true
    			             }
    			         },
    			         {
    			             scale: true,
    			             gridIndex: 1,
    			             splitNumber: 2,
    			             axisLabel: {show: false},
    			             axisLine: {show: false},
    			             axisTick: {show: false},
    			             splitLine: {show: false}
    			         }
    			     ],
    			     dataZoom: [
    			         {
    			             type: 'inside',
    			             xAxisIndex: [0, 1],
    			             start: 10,
    			             end: 100
    			         },
    			         {
    			             show: true,
    			             xAxisIndex: [0, 1],
    			             type: 'slider',
    			             bottom: 10,
    			             start: 10,
    			             end: 100,
    			             handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    			             handleSize: '105%'
    			         }
    			     ],
    			     visualMap: {
    			         show: false,
    			         seriesIndex: 1,
    			         dimension: 6,
    			         pieces: [{
    			             value: 1,
    			             color: upColor
    			         }, {
    			             value: -1,
    			             color: downColor
    			         }]
    			     },
    			     series: [
    			         {
    			             type: 'line',
    			             itemStyle: {
    			                 color: upColor,
    			                 color0: downColor,
    			                 borderColor: upBorderColor,
    			                 borderColor0: downBorderColor
    			             },
    			             encode: {
    			                 x: 0,
    			                 y: [1, 4, 3, 2]
    			             }
    			         }
    			     ]
    			 };

    			 function generateOHLC(responseDate,count,timeInterval) {
    			     var data = [];

    			     var xValue = +new Date(2011, 0, 1);
    			     var minute = timeInterval * 1000;
    			     var boxVals;
    			     var dayRange = 12;
    			     for (var i = 0; i < count; i++) {
    			         data[i] = [
    			             echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss',responseDate[0][i].getTime),
    			             count
    			             ];
    			         
    			     }
    			     return data;
    			 }
    		        dataViewDiv.setOption(option);
    		        $('#my-popup').modal(); */
    		}
    	});
    		
       
  	}
$(function() {
   var $alert = $('#my-alert');
   $('#my-start').datepicker().
     on('changeDate.datepicker.amui', function(event) {
       if (event.date.valueOf() > endTime.valueOf()) {
         $alert.find('p').text('开始日期应小于结束日期！').end().show();
       } else {
         $alert.hide();
         startTime = new Date(event.date);
         $('#my-startDate').text($('#my-start').data('date'));
       }
       $(this).datepicker('close');
     });

   $('#my-end').datepicker().
     on('changeDate.datepicker.amui', function(event) {
       if (event.date.valueOf() < startTime.valueOf()) {
         $alert.find('p').text('结束日期应大于开始日期！').end().show();
       } else {
         $alert.hide();
         endTime = new Date(event.date);
         $('#my-endDate').text($('#my-end').data('date'));
       }
       $(this).datepicker('close');
     });
 });
$('.btn-loading-example').click(function () {
	  var $btn = $(this)
	  $btn.button('loading');
	    setTimeout(function(){
	      $btn.button('reset');
	  }, 5000);
	});
</script>
</body>

</html>